<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>



<!-- 文档地址 https://zijieke.com/semantic-ui/views/card.php -->
<div class="ui card" style="margin: 10px auto;font-size: 14px">
	<!-- 头像或图片 -->
	<div class="image">
		<img src="http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg">
	</div>
	<div class="content">
		<!-- 标题 -->
		<a class="header">Kristy</a>
		<div class="meta">
			<!-- 卡片日期 -->
			<span class="date">Joined in 2013</span>
		</div>
		<div class="description">
			<!-- 内容 -->
			Kristy is an art director living in New York.
		</div>
	</div>
	<div class="extra content">
		<a>
			<i class="user icon"></i>
			22 Friends
		</a>
	</div>
</div>

<script type="text/javascript">
	//按钮监听
	$('.card .extra').click(function(){
		console.log($(this).index());
	})
</script>
